<!--代码逻辑和样式库-->
<script src="./alert-list.component.js"></script>
<style src="./alert-list.scss" scoped lang="scss"></style>

<template>
  <div>
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form label-position="top" :inline="true">
        <el-row type="flex">
          <el-col :span="24" class="aq-vertical-middle">
            <el-input v-if="codesCheck.indexOf('Query') !== -1" v-model="searchCriteria.queryStr" placeholder="请输入车牌或名称搜索" class="keyword" clearable @keyup.enter.native="search()"/>
            <el-select v-model="searchCriteria.enumRemove" placeholder="请选择解除状态" clearable class="aq-margin-left-4">
              <el-option label="未解除" :value="0"></el-option>
              <el-option label="已解除" :value="1"></el-option>
            </el-select>
            <el-select v-model="searchCriteria.transportId" placeholder="请选择运输单位" clearable class="aq-margin-left-8">
              <el-option v-for="(item,index) in companies" :key="index" :label="item.text" :value="'' + item.id">
              </el-option>
            </el-select>
            <el-button v-waves v-if="codesCheck.indexOf('Query') !== -1" type="primary" icon="el-icon-search" class="aq-margin-left-8" @click="search()">
              查询
            </el-button>
            <el-button v-waves v-if="codesCheck.indexOf('Query') !== -1" type="warning" icon="el-icon-refresh" @click="reset()">
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 内容区域 -->
    <div class="content-container aq-margin-top-16">
      <!--报警table-->
      <el-table :data="data" border fit highlight-current-row>
        <el-table-column prop="createTime" label="报警时间" width="155" />
        <el-table-column prop="vehicleName" label="车辆名称" width="120" />
        <el-table-column prop="licensePlate" label="车牌号码" width="120">
          <template slot-scope="scope">
            <el-link type="primary" @click="showCarDetailDialog(scope.row)">{{ scope.row.licensePlate }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="compName" label="运输单位" width="120" />
        <el-table-column prop="position" label="车辆位置" width="120" />
        <el-table-column prop="Serial No." label="轨迹回放" width="80px">
          <template slot-scope="scope">
            <el-link type="primary" @click="goMachinePlayback(scope.row.historyLongLat)">轨迹回放</el-link>
          </template>
        </el-table-column>
        <el-table-column label="压力数据" width="155">
          <template slot-scope="scope">
            <div v-if="scope.row.equipNo.pressure.pa01 != '0'">1#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa01 }} Pa</span></div>
            <div v-if="scope.row.equipNo.pressure.pa02 != '0'">2#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa02 }} Pa</span></div>
            <div v-if="scope.row.equipNo.pressure.pa03 != '0'">3#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa03 }} Pa</span></div>
          </template>
        </el-table-column>
        <el-table-column prop="equipNo.disCount" label="排放次数" />
        <el-table-column prop="equipNo.disTimeAll" label="排放累计时长" width="155" />
        <el-table-column label="人孔盖状态">
          <template slot-scope="scope">
            {{ scope.row.equipNo.isEntrance?'打开':'关闭' }}
          </template>
        </el-table-column>
        <el-table-column label="泄压阀状态">
          <template slot-scope="scope">
            {{ scope.row.equipNo.isPreValve?'打开':'关闭' }}
          </template>
        </el-table-column>
        <el-table-column label="排放报警">
          <template slot-scope="scope">
            {{ scope.row.equipNo.isWarningDis?'报警':'无报警' }}
          </template>
        </el-table-column>
        <el-table-column label="设备断电报警">
          <template slot-scope="scope">
            {{ scope.row.equipNo.isPowerFail?'报警':'无报警' }}
          </template>
        </el-table-column>
        <el-table-column label="油罐气密性报警">
          <template slot-scope="scope">
            {{ scope.row.equipNo.isAirtightness?'报警':'无报警' }}
          </template>
        </el-table-column>
        <el-table-column label="油气超压报警">
          <template slot-scope="scope">
            {{ scope.row.equipNo.isOverFail?'报警':'无报警' }}
          </template>
        </el-table-column>
        <el-table-column prop="remove" label="解除状态" />
        <el-table-column label="操作" width="120px" align="center" fixed="right">
          <template slot-scope="scope">
            <el-link v-if="codesCheck.indexOf('Edit') !== -1" :disabled="(!scope.row.equipNo.isWarningDis&&!scope.row.equipNo.isPowerFail&&!scope.row.equipNo.isAirtightness&&!scope.row.equipNo.isOverFail)?false:(scope.row.enumRemove ==='1'?true:false)" type="success" @click="releaseAlert(scope.row.objectId)">解除报警</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <pagination v-show="totalNum > 0" :total="totalNum" :page.sync="pageNum" :limit.sync="recordNum" @pagination="getDataList" />
    </div>
    <!-- 显示车辆详情 -->
    <car-detail v-if="showSelectCarDetailDialog" :show-dialog.sync="showSelectCarDetailDialog" :equip-id="''" :vehicle-id="vehicleId"></car-detail>
    <!-- 轨迹回放 -->
    <play-track v-if="showPlayTrackDialog" :show-dialog.sync="showPlayTrackDialog" :track-list="selectedTrack"></play-track>
  </div>
</template>
